<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程定义</title>
    <link rel="stylesheet" href="/static/businessProcessManager/js/ele/index.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
    <img src="../images/logo.png" alt="">
    <span class="com-name">业务流程管理平台</span>
</header>
<div>
    <div class="side" id="side">
        <div id="menu" class="menu">
            <el-menu default-active="2" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>业务流程管理</template>
                    <a href="../html/process-list.html"><el-menu-item index="1-1">流程定义</el-menu-item></a>
                    <!--<a href="../html/sortManager.html"><el-menu-item index="1-2">分类管理</el-menu-item></a>-->
                    <a href="../html/run-task.html"><el-menu-item index="1-3">待办任务</el-menu-item></a>
                    <a href="../html/monitor.html"><el-menu-item index="1-3">运行监控</el-menu-item></a>
                    <!--<a href="../html/task-entrust.html"><el-menu-item index="1-4">任务委托</el-menu-item></a>-->
                    <a href="../html/model-list.html"><el-menu-item index="1-4">模型管理</el-menu-item></a>
                    <!-- <a href="user-group.html"><el-menu-item index="1-5">用户分组</el-menu-item></a>
                    <a href="dataAllocation.html"><el-menu-item index="1-6">数据配置</el-menu-item></a>
                    <a href="exampleAllocation.html"><el-menu-item index="1-7">实例配置</el-menu-item></a>-->
                </el-submenu>
            </el-menu>
        </div>
    </div>
    <div class="main-wrapper " >
        <div class="nav-bar">
            <span class="position-info">您现在的位置：<a>公文管理</a> &gt; <span class="current-position">公文会签</span></span>
        </div>
        <div class="content-wrapper" style="top: 50px;">
            <!--<div id="tree" class="tree-wrapper">
                <el-tree
                        :data="treeDatas"
                        node-key="id"
                        ref="tree"
                        highlight-current
                        lazy
                        :expand-on-click-node="false"
                        :load="loadNode"
                        @node-click="getKey"
                        :props="defaultProps">
                </el-tree>
            </div>-->
            <div id="tab" class="run-detail">
                <el-tabs v-model="activeName">
                        <div class="table-box">
                            <div class="form-box">
                                <el-form :inline="true" :model="taskForm" class="demo-form-inline">
                                    <el-form-item label="流程名称：">
                                        <el-input v-model="Varname" placeholder=""></el-input>
                                    </el-form-item>
                                    <el-button type="primary" @click="query">查询</el-button>
                                </el-form>
                            </div>
                            <div class="center">
                                <el-table
                                        :data="processList"
                                        border
                                        @selection-change="">
                                    <el-table-column
                                            type="index"
                                            width="80"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="id"
                                            label="流程定义ID"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="deploymentId"
                                            label="流程部署ID"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="key"
                                            label="流程key"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="description"
                                            label="流程描述">
                                    </el-table-column>
                                    <el-table-column
                                            prop="version"
                                            label="版本号"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop="category"
                                            label="分类编码"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                            prop=""
                                            label="操作"
                                    >
                                        <template scope="scope">
                                            <el-button @click="startProcess(scope.row)" type="text" size="small">启动</el-button>
                                            <el-button @click="designProcess(scope.row)" type="text" size="small">设计</el-button>
                                            <el-button @click="deleteProcess(scope.row)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="page-box mt20 text-right">
                                <el-pagination
                                        @current-change="query"
                                        :page-size="size"
                                        layout="total, prev, pager, next"
                                        :total="total">
                                </el-pagination>
                            </div>
                        </div>
                </el-tabs>
            </div>
        </div>
        <div class="foot-biu">
             四川新迎顺信息技术股份有限公司
        </div>
    </div>
</div>
<!-- 先引入 Vue -->
<script src="../js/ele/vue.js"></script>
<script src="../js/ele/vue-resource.js"></script>
<script src="../js/ele/vue-router.js"></script>
<!-- 引入组件库 -->
<script src="../js/ele/index.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.mCustomScrollbar.concat.min.js"></script>
<!--引入url配置文件-->
<script src="../js/config.js"></script>
<script>
    var menu = new Vue({
        el:'#menu',
        methods: {
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    });
	//流程定义列表
    var tab = new Vue({
        el:'#tab',
        data:{
            activeName: 'first',
            formLabelWidth:'85px',
            taskForm:{
              name:''
            },
            queryForm:{
                owner:'',
                way:'',
                startTime:'',
                endTime:''
            },
            processList:[],
            total:0 ,
            currentPage: 1,
            size: 10,
            Varname:''
        },
        created:function(){
            this.query();
        },
        methods:{
           /* //分页查询
            handleCurrentChange:function(data){
                var start=(data-1)*10;
                this.$http.get(url+portP+"repository/process-definitions?sort=deploymentId&order=desc&start="+start).then(function(data){
                    tab.processList=data.data.data;
                },function(response){
                    console.info(response);
                    if(response){
                    }
                })
            },*/
            //启动流程
            startProcess:function(row) {
                /*window.location.href="../../poc/index.html?processDefinitionKey="+row.key;*/
                this.$http.post(url+portP+"runtime/process-instances",{"processDefinitionKey":row.key}).then(function(data){
                    var result=data.data.id;
                    var message;
                    if(result!=null){
                        message="启动成功";
                    }else {
                        message="启动失败";
                    }
                    this.$message({
                        message: message,
                        type: 'warning'
                    });
                })
            },
            //删除流程
            deleteProcess:function(row) {
                var self=this;
                this.$http.get(url+portP+"runtime/process-instances?processDefinitionId="+row.id).then(function(data){
                   if(data.data.total!=0){
                       this.$confirm("该流程下有"+data.data.total+"个流程实例正在运行，确认删除吗？", "提示", {
                           type: 'warning'
                       }).then(function () {
                           self.$http.delete(url+portP+"repository/deployments/"+row.deploymentId+"?cascade=true").then(function(data){
                               self.$message({
                                   message: "删除成功",
                                   type: 'warning'
                               });
                               //document.location.reload();
                               self.query();
                           })
                       })
                   }else{
                       this.$http.delete(url+portP+"repository/deployments/"+row.deploymentId).then(function(data){
                           self.$message({
                               message: "删除成功",
                               type: 'warning'
                           });
                           //document.location.reload();
                           self.query();
                       })
                   }
                })
            },
            //设计
            designProcess:function (row) {
                var processDefinitionId=row.id;
                if(processDefinitionId!=null&&processDefinitionId!="undefined"){
                    processDefinitionId=processDefinitionId.replace(/:/g,"%3a");
                    window.location.href="../html/diagram.html?processDefinitionId="+processDefinitionId;
                }
            },
            //查询 包括分页查询 条件查询
            query:function (data) {
                var Vstart=0;
                if(data!=undefined&&!isNaN(data)){
                    Vstart=(data-1)*10;
                }
                if(this.Varname==""){
                    this.$http.get(url+portP+"repository/process-definitions?sort=deploymentId&order=desc&start="+Vstart).then(function(data){
                        tab.processList=data.data.data;
                        tab.total = data.data.total;
                    },function(response){
                        console.info(response);
                    })
                }else{
                    this.$http.get(url+portP+"repository/process-definitions?nameLike=%25"+tab.Varname+"%25&sort=deploymentId&order=desc&start="+Vstart).then(function(data){
                        tab.processList=data.data.data;
                        tab.total = data.data.total;
                    },function(response){
                        console.info(response);
                    })
                }
            }
        }
    })
    //    树形
    /*var tree = new Vue({
        el: '#tree',
        data: {
            treeDatas:[],
            defaultProps: {
                label: 'NAME'
            },
        },
        methods: {
            getKey:function (data,node) {
                this.$http.get(url+portC+"actProcess/"+data.ID).then(function(data){

                },function(response){
                    console.info(response);
                    if(response){

                    }
                })
                console.log(data);
            },
            loadNode:function(node,addNode){
                var pid;
                if(node.id==0){
                    pid = "-1";
                }else{
                    pid = node.data.ID;
                }
                this.$http.get(url+portC+"actProcess",{'pid':pid}).then(function(data){
                    addNode(data.data);
                },function(response){
                    console.info(response);
                    if(response){

                    }
                })
            }
        }
    });*/
</script>
</body>
</html>
